<template>
  <div>
    <Select v-model="themeColor" @on-change="changeTheme">
      <Option v-for="theme in themeList" :key="theme.value" :value="theme.value">{{theme.label}}</Option>
    </Select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      themeList: [
        {
          value: 'primary',
          label: 'primary'
        },
        {
          value: 'orange',
          label: 'orange'
        },
        {
          value: 'green',
          label: 'green'
        },
        {
          value: 'red',
          label: 'red'
        },
        {
          value: 'purple',
          label: 'purple'
        }
      ],
      themeColor: this.$store.state.iviewThemeColor.themeColor
    }
  },
  methods: {
    changeTheme (value) {
      document.querySelector('link[name=theme]').href = `/themes/${value}-iview.css`
      this.$store.commit('setTheme', value)
    }
  }
}
</script>
<style>
</style>
